<template>
  <div class="ques13" :style="{ marginTop: quesTop + 'px' }">
    <el-form :model="quesForm" ref="quesForm" label-width="100px" class="quesForm">
      <el-form-item label="您对哪些算法应用场景感兴趣？" prop="interests_applies">
        <el-checkbox-group v-model="quesForm.interests_applies" @change="validateForm13AndNextPage" :style="{ marginLeft: bannerWeight + 'px' }">
          <el-checkbox label="推荐系统" name="interests_applies"></el-checkbox>
          <el-checkbox label="图像识别" name="interests_applies"></el-checkbox>
          <el-checkbox label="语音识别" name="interests_applies"></el-checkbox>
          <el-checkbox label="自然语言处理" name="interests_applies"></el-checkbox>
          <el-checkbox label="金融科技" name="interests_applies"></el-checkbox>
          <el-checkbox label="电子商务" name="interests_applies"></el-checkbox>
          <el-checkbox label="物联网" name="interests_applies"></el-checkbox>
          <el-checkbox label="其他" name="interests_applies"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div class="progress" :style="{ width: progressWidth + 'px', marginTop: progressTop + 'px' }">
      <el-progress :stroke-width="18" :percentage="percentage" :color="customColor"></el-progress>
    </div>
  </div>
</template>


<script>
export default {
  props: ['showNextArrow'],
  data() {
    return {
      bannerWeight: 0,
      quesTop: 0,
      progressWidth: 0,
      progressTop: 0,
      screenWidth: 0,
      screenHeight: 0,
      percentage: 93,
      customColor: '#ff9000',
      quesForm: {
        interests_applies: [],
      },
      showNextArrow_13: this.showNextArrow,
      // rules: {
      //   experience: [
      //     { required: true, message: '请选择编程经验', trigger: 'change' }
      //   ],
      // }
    }
  },
  watch: {
    showNextArrow_13: function (value) {
      this.$emit('updateShowNextArrow', value);
    },
    'quesForm.interests_applies': function (newValue) {
      this.updateShowNextArrow(newValue);
    },
  },
  mounted: function () {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;
    this.setSize();
    this.updateScreenSize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount: function () {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    validateForm13AndNextPage() {
      this.$refs.quesForm.validate(valid => {
        if (valid) {
          // 多项选择不触发切换至下一页
          // this.$emit('formValidated');
          this.updateShowNextArrow();
          this.$emit('updateShowNextArrow', this.showNextArrow_13);
        }
      });
    },
    updateShowNextArrow() {
      if (this.quesForm.interests_applies.length === 0) {
        this.showNextArrow_13 = false; // 当表单未填写时隐藏右箭头
      } else {
        this.showNextArrow_13 = true; // 当表单填写后显示右箭头
      }
    },
    getShowNextArrow() {
      return this.quesForm.interests_applies.length === 0 ? false : true;
    },
    handleResize: function () {
      this.updateScreenSize();
      this.setSize();
    },
    updateScreenSize: function () {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    setSize: function () {
      this.bannerWeight = 0.26 * this.screenWidth;
      this.quesTop = 0.1 * this.screenHeight;
      this.progressWidth = 0.6 * this.screenWidth;
      this.progressTop = 0.05 * this.screenHeight;
    },
  }
}
</script> 
<style lang="scss">
.ques13 {

  .el-form-item__label {
    float: none;
    font-size: 50px;
    font-weight: bold;
    color: #633E1C;
  }

  .el-form-item__content {
    margin-top: 30px;
    text-align: left;
  }

  .el-checkbox__label {
    font-size: 30px;
    line-height: 2;
  }

  .el-checkbox {
    display: block;
    color: #865E2A;
  }

  .el-checkbox__inner {
    height: 20px;
    width: 20px;
  }

  .el-checkbox__inner::after {
    display: none;
  }

  .progress {
    margin: 0 auto;
  }

  .el-checkbox__label {
    vertical-align: middle;
  }

}
</style>